<template>
	<view class="category-container" :style="{height: `${windowHeight}px`}">
		<!-- 门店 -->
		<view class="c-header">
			<u-search v-model="queryParams.name" placeholder="请输入门店名称" :showAction="true" actionText="搜索" :animation="true"
				@custom="handleSearch" @clear="handleSearch"></u-search>
			<u-icon v-if="$auth.hasPermi('trade:delivery:pick-up-store:create')" @click="handleEdit" name="plus-circle"
				size='22'></u-icon>
		</view>
		<!-- 内容为空 -->
		<view class="empty-container" v-if="!list.length">
			<u-empty mode="data"></u-empty>
		</view>
		<!-- 列表 -->
		<!-- <view class="c-list" v-else> -->
		<!-- <u-list @scrolltolower="scrolltolower" :height="lineHeight"> -->
		<uni-swipe-action >
			<uni-swipe-action-item v-for="(item, index) in list" :key="index" @change="handleSwipeClick">
				<u-cell :title="item.name">
					<u-avatar slot="icon" shape="square" size="40" :src="item.logo"
						customStyle="margin: -3px 5px -3px 0"></u-avatar>
				</u-cell>
				<template v-slot:right>
					<view class="swipe-action-right">
						<view v-if="$auth.hasPermi('trade:delivery:pick-up-store:update')" @touchstart="handleEdit(item.id)"
							class="swipe-action-button" style="background-color: #3e9bff; color: #fff;">
							编辑
						</view>
						<view v-if="$auth.hasPermi('trade:delivery:pick-up-store:bind')" class="swipe-action-button"
							style="background-color: #00a854; color: #fff;">
							绑定店员
						</view>
						<view v-if="$auth.hasPermi('trade:delivery:pick-up-store:qrcode')" class="swipe-action-button"
							style="background-color: #ffcc00; color: #fff;">
							生成二维码
						</view>
						<view v-if="$auth.hasPermi('trade:delivery:pick-up-store:delete')" @change="deleteStore(item.id)" 
							class="swipe-action-button" style="background-color: #ff5a5f; color: #fff;">
							删除
						</view>
					</view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- <u-loadmore :status="loadMoreStatus" style="margin-top: 14px;" /> -->
		<!-- </u-list> -->
		<!-- </view> -->
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getDeliveryPickUpStorePage,
		deleteDeliveryPickUpStore
	} from '@/api/store/center.js'

	export default {
		name: 'StoreCenter',
		data() {
			return {
				queryParams: {
					name: '',
					storeId: undefined,
					pageNo: 1,
					pageSize: 10
				},
				list: [],
				loadMoreStatus: 'loadmore',
			}
		},
		computed: {
			...mapGetters(['selectedStore']),
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight;
			},
			lineHeight() {
				return uni.getSystemInfoSync().windowHeight - 60;
			}
		},
		onShow() {
			this.queryParams.pageNo = 1;
			this.list = [];
			this.loadMoreStatus = 'loadmore';
			this.queryParams.storeId = this.selectedStore?.id;
			this.getList();
		},
		methods: {
			async getList(isSearch) {
				if (isSearch) {
					this.queryParams.pageNo = 1;
					this.list = [];
				}
				this.loadMoreStatus = 'loading';
				try {
					const {
						data
					} = await getDeliveryPickUpStorePage({
						...this.queryParams,
						pageNo: this.queryParams.pageNo
					});

					const hasMore = (this.queryParams.pageNo * this.queryParams.pageSize) < data.total;
					if (data.list && data.list.length) {
						this.list = [...this.list, ...data.list];
						this.queryParams.pageNo += 1;
					}

					this.loadMoreStatus = hasMore ? 'loadmore' : 'nomore';
				} catch (error) {
					console.error('加载失败', error);
					this.loadMoreStatus = 'nomore';
					this.$modal.msgError('加载失败，请重试');
				}
			},
			handleSearch() {
				this.getList(true);
			},
			handleEdit(id) {
				// this.$tab.navigateTo('/pages/mall/product/brand/brandForm?id=' + id)
			},
			scrolltolower() {
				if (this.loadMoreStatus === 'loadmore') {
					this.getList();
				}
			},
			deleteStore(id) {
				this.$modal.confirm('确认删除该门店？').then(async () => {
					await deleteDeliveryPickUpStore(id);
					this.$modal.msgSuccess('删除成功');
					this.queryParams.pageNo = 1;
					this.list = [];
					this.getList();
				})
			},
			handleSwipeClick(e) {
				console.log(e);
			}
		}
	}
</script>
<style scoped>
	.category-container {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		width: 100%;
		padding: 12px;
		box-sizing: border-box;
	}

	.c-header {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.empty-container {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.c-list {
		flex: 1;
		overflow-y: auto;
		margin-top: 8px;
	}

	.loading-text {
		text-align: center;
		padding: 10px;
		color: #999;
	}

	.collapse-footer-icon,
	.collapse-footer-menu-icon {
		display: flex;
	}

	.swipe-action-right {
		display: flex;
		width: 100%;
		height: 100%;
	}

	.swipe-action-button {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 14px;
		padding: 0 12px;
		box-sizing: border-box;
	}
</style>